<template>
	<view>
		<!-- <u-search shape="round"></u-search> -->
		<view class="v-u-search-content">
			<u-search :show-action="true" action-text="取消" :animation="true" placeholder="请输入搜索内容" v-model="keyword"
				@search="search"></u-search>
		</view>

		<view class="tab_nav">
			<view class="navTitle" v-for="(item,index) in navList" :key="index">
				<view :class="{'active':isActive === index}" @click="checked(index)">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="nav_item" v-if="isActive==-1">
			<view class="foods" v-for="food in common" :key="food.id">
				<view class="food">
					<view class="foodname">{{food.foodName}}</view>
					<view class="fooddata">{{food.calorie}}千卡/100克</view>
				</view>
				<view class="tj">
					<image :src="`${urlHeat}food/icon/添加.png`" mode="" class="tj" @click="addRecord(food.foodName,food.calorie)"></image>
				</view>
			</view>


		</view>
		<view class="nav_item" v-if="isActive==0">
			<view class="zdy" v-if="1==0">
				<image src="../../static/lxy/zdy.png" mode="" class="zdyphoto"></image>
				<view class="zdyFood">暂无自定义食物</view>
				<view class="qtj">去添加</view>
			</view>
			<view class="zdy" v-if="0==0">

				<view class="foods" v-for="food in common2" :key="food.id">
					<view class="food">
						<view class="foodname">{{food.foodName}}</view>
						<view class="fooddata">{{food.calorie}}千卡/100克</view>
					</view>
					<view class="tj">
						<image :src="`${urlHeat}food/icon/添加.png`" mode="" class="tj" @click="addRecord(food.foodName,food.calorie)"></image>
					</view>
				</view>
				<view class="zdy-increase">
				<view class="qtj" @click="set()">去添加</view>					
				</view>
			</view>
		</view>

		<view class="nav_item" v-if="isActive==1">
			<view class="foods" v-for="food in common" :key="food.id">
				<view class="food">
					<view class="foodname">{{food.foodName}}</view>
					<view class="fooddata">{{food.calorie}}千卡/100克</view>
				</view>
				<view class="tj">
					<image :src="`${urlHeat}food/icon/添加.png`" mode="" class="tj" @click="addRecord(food.foodName,food.calorie)"></image>
				</view>
			</view>
		</view>


		<!-- 记录 -->
		<view class="jl">
			<view class="jlphoto">
				<image src="../../static/jl.png" mode="" class="jlphoto"></image>
			</view>

			<view class="jldata">
				<view class="jldata1">已添加{{foodSum}}项食物</view>
				<view class="jldata2">总计{{calorieSum}}千卡</view>
			</view>

			<view class="jlbutton" @click="submitRecord()">记录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//图片路径
				urlHeat: "", //https://fine-food.xiamu.icu/
				// urlHeat3: "http://localhost:8080",
				//服务端路径
				urlHeat3: "", //https://fine-food.xiamu.icu
				isActive: 0,
				navList: [
				// 	{
				// 	index: 0,
				// 	title: '最近添加'
				// }, 
				{
					index: 0,
					title: "自定义"
				}, {
					index: 1,
					title: "常见"
				}],
				//搜索
			    keyword:"",
				//当前页码
				page: "1",
				common: [],
				common2: [],
				//美食id
				foodIds:[],
				foodSum:0,
				calorieSum:0,
				
				record:[
					
				],
				
			}
		},
		onLoad() {
			const {hostname} = this.$store.state.moduleCommon;
			const {urlImg} = this.$store.state.moduleCommon;
			this.urlHeat3 = hostname;
			this.urlHeat = urlImg + "/";
			//常见美食列表
			uni.request({
				url: this.urlHeat3 + "/api/Calories/select/foods", //
				method: "GET",
				header: {
					'Authorization': 'Bearer ' + uni.getStorageSync("Authorization")
				},
				data: {
					"page": this.page,
					"limit": "12",
				},
				success: (res) => {
					this.common = res.data.data.records
					// console.log(this.common);
				},
			});
			//自定义美食列表
			uni.request({
				url: this.urlHeat3 + "/api/Calories/select/customize_foods", //
				method: "GET",
				header: {
					'Authorization': 'Bearer ' + uni.getStorageSync("Authorization")
				},
				data: {
					"page": this.page,
					"limit": "12",
				},
				success: (res) => {
					this.common2 = res.data.data.records
					// console.log(this.common2);
				},
			});

		},
		methods: {
			//添加页面
			set(){
				uni.navigateTo({
					url: '/pages/addUser/addUser'
				});
			},
			checked(index) {
				this.isActive = index
				// console.log(index)
			},
			addRecord(name1,calorie1){
				this.record.push({foodName:name1,totalCalorie:calorie1});
				this.foodSum+=1;
				this.calorieSum+=calorie1;
				// console.log(JSON.stringify(this.record));
			},
			submitRecord(){
				uni.request({
					url: this.urlHeat3 + "/api/Calories/add/calories_Records", //
					method: "POST",
					data:this.record,
					header: {
						'Content-Type': 'application/json',
						'Authorization': 'Bearer ' + uni.getStorageSync("Authorization")
					},
					success: (res) => {
						console.log(res);
						uni.switchTab({
							url: `/pages/healthy/healthy`
						})
					},
				});
			}

		}
	}
</script>

<style lang="scss">
	view {
		vertical-align: middle;
	}

	page {
		background-color: rgb(255, 255, 255);
	}

	// 搜索加定位
	.v-u-search {
		width: 750rpx;
		height: 70rpx;
		position: fixed;
		top: var(--window-top);
		z-index: 100;
		background-color: #ffffff;
		.v-u-search-content {
			background-color: #ffffff;
			width: 590rpx;
			height: 65rpx;

			display: inline-block;
			vertical-align: top;
			margin-left: 10rpx;
		}
	}

	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 5rpx solid gainsboro;
		padding-bottom: 20rpx;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: rgb(181, 181, 181);
	}

	.active {
		position: relative;
		color: black;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: black;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	/*  */
	.foods {
		width: 100%;
		height: 130rpx;
		/* background: red; */
		border-bottom: 5rpx solid gainsboro;
		display: inline-block;
	}

	.food {
		width: 90%;
		height: 130rpx;
		/* background: cornflowerblue; */
		display: inline-block;
		padding-left: 20rpx;
	}

	.foodname {
		width: 30%;
		height: 70rpx;
		/* background: red; */
		line-height: 80rpx;
		font-size: 32rpx;
	}

	.fooddata {
		width: 60%;
		height: 40rpx;
		/* background: beige; */
		font-size: 25rpx;
		color: rgb(181, 181, 181);
	}

	.tj {
		width: 70rpx;
		height: 70rpx;
		/* background: blue; */
		display: inline-block;
	}



	/* 记录 */
	.jl {
		width: 100%;
		height: 150rpx;
		background: #FFFFFF;
		//固定位置
		position: fixed;
		/* top: 100; */
		/* position: absolute; */
		bottom: 0rpx;
		z-index: 1000;

		bottom: 0px;
		border-top: 5rpx solid gainsboro;
	}

	.jlphoto {
		width: 100rpx;
		height: 100rpx;
		/* background: blue; */
		display: inline-block;
	}

	.jldata {
		width: 40%;
		height: 150rpx;
		/* background: gold; */
		display: inline-block;
		margin: 5rpx;
	}

	.jldata1 {
		width: 100%;
		height: 70rpx;
		/* background: yellowgreen; */
		display: inline-block;
		padding-top: 35rpx;
		font-size: 22rpx;
		color: rgb(107, 107, 107);
	}

	.jldata2 {
		width: 100%;
		height: 50rpx;
		/* background: rebeccapurple; */
		display: inline-block;
		font-size: 32rpx;
	}

	.jlbutton {
		width: 40%;
		height: 100rpx;
		background: rgb(77, 218, 166);
		display: inline-block;
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		color: white;
		font-size: 40rpx;
	}

	/*  */
	.zdyphoto {
		width: 70%;
		height: 400rpx;
		margin: 0 auto;
		margin-top: 150rpx;
		margin-left: 120rpx;
	}

	.zdyFood {
		width: 100%;
		height: 50rpx;
		/* background: red; */
		margin-top: 30rpx;
		margin-bottom: 20rpx;
		text-align: center;
		font-size: 32rpx;
		color: rgb(167, 167, 167);
	}
	.zdy-increase{
		height: 300rpx;
		padding-top: 25rpx;
		padding-bottom: 25rpx;
		.qtj {
			width: 40%;
			height: 100rpx;
			background: rgb(77, 218, 166);
			margin: 0 auto;
			border-radius: 50rpx;
			text-align: center;
			line-height: 100rpx;
			color: white;
			font-size: 40rpx;
		}
	}

	
</style>
